<template>
  <div class="content">
    <div v-if="role == 1">
      <div class="contentBox">
        <div class="fontBox">
          <span class="font">新学委学号：</span>
          <el-input v-model="newAssNo"></el-input>
        </div>
        <div class="fontBox">
          <span class="font">新学委名字：</span>
          <el-input v-model="newAssName"></el-input>
        </div>
        <div class="buttonBox1">
          <el-button type="primary" @click="toTransferPower">确认转让</el-button>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="stuBox">
        <div class="stuView">
          <span class="font">权限码&ensp;：</span>
          <el-input v-model="roleCode"></el-input>
        </div>
        <div class="buttonBox">
          <el-button type="primary" @click="toBecome">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../../util/http';

export default {
  name: 'refresh',
	inject: ['reload'],
  data() {
    return {
      roleCode: '',
      newAssNo: '',
      newAssName: '',
      role: window.localStorage.getItem('userRole'),
    };
  },
  methods: {
    toTransferPower() {
      if (this.newAssId === '' || this.newAssName === '') {
        this.$message.error('请输入想要转让权限的学号、名字');
      } else {
        this.$confirm('是否把学委权限转让给此人?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          http.put(`/classAPI/changeCommittee?id=${window.localStorage.getItem('userId')}
              &no=${this.newAssNo}&name=${this.newAssName}`)
            .then((res) => {
              window.localStorage.setItem('userRole', 0);
              this.$message({
                type: 'success',
                message: '转让成功!',
              });
              this.refresh();
            }).catch((error) => {
              this.$message.error(error.data.message);
              console.log(error);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消转让',
          });
        });
      }
    },
    toBecome() {
      if (this.roleCode === '') {
        this.$message.error('亲亲，你没输入权限码哦~');
      } else {
        http.put(`/studentAPI/beACommittee?id=${window.localStorage.getItem('userId')}
          &code=${this.roleCode}`)
        .then((res) => {
          window.localStorage.setItem('userRole', 1);
          console.log(res);
          const h = this.$createElement;
          this.$notify({
            title: '恭喜你成为学委',
            duration: 0,
            message: h('i', { style: 'color: teal' }, '成为学委后，第一步先去“班级信息”，输入班级名称，创建班级；第二步再把班级ID告知同学。'),
          });
        }).catch((error) => {
          this.$message.error(error.data.message);
          console.log(error);
        });
      }
    },
    refresh() {
      this.reload();
    },
  },
};
</script>

<style scoped>
.content{
  /* background-color: yellow; */
  width: 23rem;
  height: 11rem;
  border: .03rem solid #ccc;
  border-left:none;
  border-right:none;
  border-bottom:none;
}
.stuBox{
  margin: 2.5rem auto;
  /* background-color: red; */
  width: 12rem;
  /* height: 2rem; */
}
.stuView{
  /* width: 7.5rem;
  height: 2rem; */
  float: left;
  margin: 0 1rem 0 0;
}
.font{
  color: #66cccc;
  font-size: .5rem;
}
.buttonBox {
  float: left;
  background-color: yellow;
  /* margin: 0 0 0 1rem; */
}
.buttonBox1 {
  margin: 1rem 0 0 2.5rem;
}
.contentBox{
  margin: 1.4rem auto;
  width: 9rem;
  height: 5rem;
}
.fontBox{
  padding: 1rem 0 0 0;
}
.el-input {
  width: 5rem;
  height: 10%;
}
.el-button {
  background-color: #66cccc;
  width: 3rem;
	color: white;
  border:#66cccc;
}
.el-button:hover {
  background-color: #FAACA8;
}
</style>
